<template>
    <div class="leftArea">
        <h2>塞罕云</h2>
        <ul class="ulOne">
            <li v-for="items,i of leftcontent" :key="i">
                <span @click="wardClick(i,items.children[0].index)">{{items.name}}
                    <img v-if="n==i" class="ulOne-img" src="../../assets/img/index/downward.png" alt="">
                    <img v-else class="ulOne-img" src="../../assets/img/index/rightward.png" alt="">
                </span>
                <ul class="ulTwo" v-show="n==i">
                    <li v-for="item,j of items.children" :key="j" @click="gotoClick(j,item.index)" :class="{active:m==j?true:false}">{{item.name}}</li>
                </ul>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:['leftcontent'],
    data(){
        return{
            n:0,
            m:-2,
        }
    },
    mounted(){
        this.gotoClick(0,'/index')
    },
    methods:{
        // 侧边栏打开关闭
        wardClick(i,index){
            this.m=0
            if(this.n==i){
                this.n=-1
            }else{
                this.n=i
            }
            this.$router.push(`${index}`)
        },
        // 点击侧边栏切换页面
        gotoClick(j,index){
            this.m=j
            this.$router.push(`${index}`)
        }
    },
    watch:{
        $route( to , from ){   
            console.log('to',to.path)
            if(to.path=="/index/management"){
                this.n=1
                this.m=1
            }
            // to , from 分别表示从哪跳转到哪，都是一个对象
            // to.path  ( 表示的是要跳转到的路由的地址 eg: /home );
        }
    }
}
</script>

<style scoped>
.leftArea{
    width: 204px;
    color: #FFFFFF;
    font-family: Microsoft YaHei;
    padding: 25px 0;
    text-align: left;
    font-size: 16px;
    background: #007bff;
    background: linear-gradient(0deg,#833DF5, rgba(82, 187, 253, 1));
}
h2{
    padding: 0px 20px;
    font-size: 33px;
    margin-bottom: 40px;
}
.ulOne li>span{
    font-size: 20px;
    padding: 15px 20px;
    opacity: 0.9;
    display: flex;
    align-items: center;
}
.ulOne li:first-child>span{
    opacity: 1;
}
.ulOne-img{
    margin-left: 8px;
    width: 15px;
    height: 16px;
}
.ulTwo li{
    opacity: 0.7;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    padding: 0px 20px;
    margin: 5px 0;
}
.ulTwo li:hover{
    background: rgba(255,255,255,.2);
    opacity: .9;
}
.ulTwo .active{
    background: rgba(255,255,255,.4);
    opacity: 1;
}
</style>